<template>
  <div class="editor">
    <div id="e">
    </div>
    <div v-html="content">
    </div>
    <el-button @click="handle">发送</el-button>
  </div>
</template>

<script>
import E from 'wangeditor'

export default {
  name: 'editor',
  data () {
    return {
      content: '',
      editor: null
    }
  },
  methods: {
    initE () {
      this.editor = new E('#e')
      this.editor.config.menus = [
        'emoticon',
        'image'
      ]
      this.editor.config.zIndex = 0
      this.editor.config.showFullScreen = false
      this.editor.config.emotions = [
        {
          // tab 的标题
          title: '默认',
          // type -> 'emoji' / 'image'
          type: 'image',
          // content -> 数组
          content: [
            {
              alt: '[大哭]',
              src: 'http://127.0.0.1:8082/daku.png'
            },
            {
              alt: '[大笑]',
              src: 'http://127.0.0.1:8082/daxiao.png'
            },
            {
              alt: '[嗯嗯]',
              src: 'http://127.0.0.1:8082/enen.png'
            },
            {
              alt: '[滑稽]',
              src: 'http://127.0.0.1:8082/huaji.png'
            },
            {
              alt: '[吐舌]',
              src: 'http://127.0.0.1:8082/tushe.png'
            },
            {
              alt: '[无语]',
              src: 'http://127.0.0.1:8082/wuyu.png'
            },
            {
              alt: '[笑嘻了]',
              src: 'http://127.0.0.1:8082/xiaoxile.png'
            }
          ]
        }
      ]
      this.editor.create()
    },
    handle () {
      this.content = this.editor.txt.html()
    }
  },
  mounted () {
    this.initE()
  }
}
</script>

<style scoped>

</style>
